<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4 px-6">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 左边栏，占用 3 列 -->
            <div class="col-span-4 md:col-span-3 mb-3">
                <div class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700"
                    v-for="(archive, index) in archives" :key="index">
                    <time class="text-lg font-semibold text-gray-900 dark:text-white">{{ archive.yearMonth }}</time>
                    <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
                        <li v-for="(article, articleIndex) in archive.articles" :key="articleIndex">
                            <a @click="goArticleDetailPage(article.id)" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                                <img class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0" :src="article.cover"
                                    alt="Jese Leos image" />
                                <div class="text-gray-600 dark:text-gray-400">
                                    <h2 class="text-base font-normal">
                                        {{ article.title }}
                                    </h2>
                                    <span
                                        class="inline-flex items-center text-xs font-normal text-gray-600 dark:text-gray-400">
                                        <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400"
                                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 20 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                        </svg>
                                        {{ article.createDate }}
                                    </span>
                                </div>
                            </a>
                        </li>
                    </ol>
                </div>

                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <!-- 上一页 -->
                        <li>
                            <a @click="getArchives(current - 1)"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">上一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 1 1 5l4 4" />
                                </svg>
                            </a>
                        </li>
                        <!-- 页码 -->
                        <li v-for="(pageIndex, index) in pages" :key="index">
                            <a @click="getArchives(pageIndex)"
                                class="bg-white hover:text-blue-700 flex items-center justify-center px-4 h-10 leading-tight border dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
                                :class="[current == pageIndex ? 'text-blue-600 bg-blue-50 border-blue-300 bg-blue-100 hover:text-blue-700 dark:bg-gray-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800']">
                                {{ pageIndex }}
                            </a>
                        </li>
                        <!-- 下一页 -->
                        <li>
                            <a @click="getArchives(current + 1)"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current < pages ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">下一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1">
                <div class="sticky top-[5.5rem]">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>

                    <!-- 分类 -->
                    <CategoryCard></CategoryCard>

                    <!-- 标签 -->
                    <TagCard></TagCard>
                </div>

            </aside>
        </div>
    </main>
    <ScrollToTopButton></ScrollToTopButton>
    <Footer></Footer>
</template>

<script setup>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import UserInfoCard from './components/UserInfoCard.vue';
import CategoryCard from './components/CategoryCard.vue';
import TagCard from './components/TagCard.vue';
import ScrollToTopButton from './components/ScrollToTopButton.vue';
import { ref } from 'vue';
import { getArchiveArticlePageList } from '@/api/frontend/archive';
import { showMessage } from '@/composables/utils';
import { useRouter } from 'vue-router';

const router = useRouter()

// 获取归档页面数据
const archives = ref([])
// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(20)
// 总共多少页
const pages = ref(0)

const getArchives = (currentOn) => {
    if (currentOn < 1 || (pages.value > 0 && currentOn > pages.value)) return
    // 调用接口
    let params = {
        "current": currentOn,
        "size": size.value
    }
    getArchiveArticlePageList(params).then((res) => {
        if (res.success == true) {
            archives.value = res.data

            // 保存分页信息
            current.value = res.pageIndex
            size.value = res.size
            pages.value = res.pages
        } else {
            let message = res.message
            showMessage(message, 'error')
        }
    })
}
getArchives(current.value)

// 跳转到文章详情页
const goArticleDetailPage = (id) => {
    router.push({path: '/article/detail/' + id})
}
</script>